<template>
	<div class="Personal-Main">
		<!--选项卡-->
		<div class="Personal-Main-tab">
			<div class="Personal-Main-tab-news">
				<div class="Personal-Main-tab-img">
					<img :src="headPhoto" alt="">
				</div>
				<span class="Personal-Main-tab-news-name">{{userinfo.userName}}</span>
			</div>
			<ul class="Personal-Main-tab-li">
				<li @click="msg=0" :class="{'LiActive':msg===0}">个人信息</li>
				<li @click="msg=1" :class="{'LiActive':msg===1}">更改头像</li>
				<li @click="msg=2" :class="{'LiActive':msg===2}">身证份上传</li>
				<li @click="msg=3" :class="{'LiActive':msg===3}">修改密码</li>
			</ul>
		</div>
		<!--表单-->
		<ul class="Personal-Main-concent">
			<li v-show="msg===0" class="Personal-Main-concent-li">
				<Form :model="formItem" :label-width="120" ref="PersonalForm">
					<FormItem label="姓名" style="width: 50%">
						<Input v-model="formItem.realName" placeholder="请输入您的真实姓名" size="large"></Input>
					</FormItem>
					<FormItem label="性别" style="width: 50%">
						<Select v-model="sex" style="" placeholder="请输入您的性别" @on-change="getSex(sex)">
							<Option v-for="(item, index) in sex_arr" :value="item.value" :key="index">{{item.value}}</Option>
						</Select>
					</FormItem>
					<FormItem label="民族" style="width: 50%">
						<Select v-model="formItem.nation" style="" placeholder="请输入您的民族">
							<Option v-for="(item, index) in nations_arr" :value="item" :key="index">{{item}}</Option>
						</Select>
					</FormItem>
					<FormItem label="生日" style="width: 50%">
						<!--<Input v-model="" placeholder="请输入您的生日" size="large"></Input>-->
						<DatePicker type="date" :value="formItem.birthday" style="width: 100%" format="yyyy-MM-dd" @on-change="getTime1"></DatePicker>
					</FormItem>
					<FormItem label="籍贯" style="width: 50%">
						<Input v-model="formItem.nativePlace" placeholder="请输入您的籍贯" size="large"></Input>
					</FormItem>
					<FormItem label="地址" style="width: 50%">
						<Input v-model="formItem.address" placeholder="请输入您的地址" size="large"></Input>
					</FormItem>
					<FormItem label="职业" style="width: 50%">
						<Input v-model="formItem.occupation" placeholder="请输入您的职业" size="large"></Input>
					</FormItem>
					<FormItem>
						<Button class="Personal-Main-concent-sub" @click="Submit">提交</Button>
						<Button class="Personal-Main-concent-can" @click="handleReset()">重置</Button>
					</FormItem>
				</Form>
			</li>
			<li v-show="msg===1" class="Personal-Main-concent-li">
				<div class="Personal-Main-concent-li-card">
					<Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :on-success="HeadPortrait" :show-upload-list="false" :headers="headers">
						<Button class="HeadPortrait">更改头像<div style="color: #d00210;">请将图片限制在200Kb以下</div></Button>
					</Upload>
					<img :src="headPhoto" alt="头像" class="HeadPortrait-Img" v-show="formItem.headphoto !== ''">
				</div>
			</li>
			<li v-show="msg===2" class="Personal-Main-concent-li">
				<div class="Personal-Main-concent-li-card">
					<Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :on-success="cardImg" :show-upload-list="false" :headers="headers">
						<Button style="margin-right: 20px" class="PersonalCard">身份证正面<div style="color: #d00210;">请将图片限制在200Kb以下</div></Button>
					</Upload>
					<img :src="formItem.identityCardFront" alt="身份证正面" class="PersonalCard-Img" v-show="formItem.identityDocumentA !== ''">
					<Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :on-success="cardImg1" :show-upload-list="false" :headers="headers">
						<Button class="PersonalCard1">身份证反面<div style="color: #d00210;">请将图片限制在200Kb以下</div></Button>
					</Upload>
					<img :src="formItem.identityCardBack" alt="身份证反面" class="PersonalCard1-Img" v-show="formItem.identityDocumentB !== ''">
				</div>
			</li>
			<li v-show="msg===3" class="Personal-Main-concent-li">
				<!--<card class="Personal-Main-concent-li-password">-->
				<Form :model="passForm" :label-width="120">
					<FormItem label="原始密码" style="width: 50%">
						<Input v-model="passForm.passwordOld" placeholder="请输入旧密码"></Input>
					</FormItem>
					<FormItem label="新密码" style="width: 50%">
						<Input v-model="passForm.passwordNew" placeholder="请输入新密码，6-16位数字或字母组合，区分大小写"></Input>
					</FormItem>
					<FormItem label="确认新密码" style="width: 50%">
						<Input v-model="passForm.passwordNew1" placeholder="请确认新密码，并保持两次输入密码一致"></Input>
					</FormItem>
					<FormItem>
						<!-- <Button class="Personal-Main-concent-Modify" @click="Modify">确认修改</Button> -->
						<Button class="Personal-Main-concent-Modify" @click="editPsd">确认修改</Button>
					</FormItem>
				</Form>
				<!--</card>-->
			</li>
		</ul>
	</div>
</template>

<script>
	import Util from '@/utils/index'
	export default {
		name: 'Personal',
		data () {
			return {
				sex: '',
				msg: 0,
				sex_arr: [{
						id: 1,
						value: '男'
					},
					{
						id: 2,
						value: '女'
					}
				],
				nations_arr: ['汉族', '蒙古族', '回族', '藏族', '维吾尔族', '苗族', '彝族', '壮族', '布依族', '朝鲜族', '满族', '侗族', '瑶族', '白族', '土家族',
					'哈尼族', '哈萨克族', '傣族', '黎族', '傈僳族', '佤族', '畲族', '高山族', '拉祜族', '水族', '东乡族', '纳西族', '景颇族', '柯尔克孜族',
					'土族', '达斡尔族', '仫佬族', '羌族', '布朗族', '撒拉族', '毛南族', '仡佬族', '锡伯族', '阿昌族', '普米族', '塔吉克族', '怒族', '乌孜别克族',
					'俄罗斯族', '鄂温克族', '德昂族', '保安族', '裕固族', '京族', '塔塔尔族', '独龙族', '鄂伦春族', '赫哲族', '门巴族', '珞巴族', '基诺族'
				],
				// 修改用户信息表单
				formItem: {
					uid: '',
					realName: '',
					sex: '',
					nation: '',
					birthday: '',
					address: '',
					occupation: '',
					nativePlace: '',
					headphoto: '',
					identityCardFront: '',
					identityCardBack: '',
					landDevice: navigator.userAgent
				},
				// 获取到的用户信息
				userinfo: {},
				passForm: {
					passwordOld: '',
					passwordNew: '',
					passwordNew1: ''
				},
				headPhoto: '',
				// 上传地址
				// uploadUrl: 'http://liudashi.f3322.net:9001/files/upload'
				uploadUrl: sessionStorage.uploadUrl + '/files/v2/upload',
				headers: {}
			}
		},
		methods: {
			getSex (sex) {
				if (sex === '男') {
					this.formItem.sex = 1
				} else {
					this.formItem.sex = 2
				}
			},
			// 获取时间
			getTime1 (time) {
				this.formItem.birthday = time
			},
			// 头像上传成功
			HeadPortrait (res) {
				if (res.code === 0) {
					this.formItem.headphoto = res.data
					console.log(this.formItem.headphoto)
					this.headPhoto = res.data
					this.formItem.uId = this.userinfo.id
					this.$api.put(0, '/usr/v2/user', {uId: this.formItem.uId, headPhoto: this.headPhoto}, r => {
						if (r.data.code === 0) {
							this.$Message.success('提交成功')
							this.GetPageInfo()
						} else {
							this.$Message.error('提交失败')
						}
					})
				} else {
					this.$Message.error('上传失败')
				}
			},
			// 身份证正面上传
			cardImg (res) {
				if (res.code === 0) {
					this.$Message.success('上传成功')
					this.formItem.uId = this.userinfo.id
					this.formItem.pId = this.formItem.pid
					this.formItem.nation = String(this.formItem.nation)
					this.formItem.landDevice = navigator.userAgent
					this.formItem.identityCardFront = res.data
					this.$api.put(0, '/usr/v2/personalInformation', this.formItem, r => {
						if (r.data.code === 0) {
							this.$Message.success('保存成功')
							this.GetPageInfo()
						} else {
							this.$Message.error('保存失败')
						}
					})
				} else {
					this.$Message.error('上传失败')
				}
			},
			// 身份证反面上传
			cardImg1 (res) {
				if (res.code === 0) {
					this.$Message.success('上传成功')
					this.formItem.uId = this.userinfo.id
					this.formItem.pId = this.formItem.pid
					this.formItem.nation = String(this.formItem.nation)
					this.formItem.landDevice = navigator.userAgent
					this.formItem.identityCardBack = res.data
					this.$api.put(0, '/usr/v2/personalInformation', this.formItem, r => {
						if (r.data.code === 0) {
							this.$Message.success('保存成功')
							this.GetPageInfo()
						} else {
							this.$Message.error('保存失败')
						}
					})
				} else {
					this.$Message.error('上传失败')
				}
			},
			// 保存提交
			Submit () {
				this.formItem.uId = this.userinfo.id
				this.formItem.pId = this.formItem.pid
				this.formItem.nation = String(this.formItem.nation)
				this.formItem.landDevice = navigator.userAgent
				if (this.formItem.pid !== undefined) {
					this.$api.put(0, '/usr/v2/personalInformation', this.formItem, r => {
						if (r.data.code === 0) {
							this.$Message.success('提交成功')
							this.GetPageInfo()
						} else {
							this.$Message.error('提交失败')
						}
					})
				} else {
					this.$api.post(0, '/usr/v2/personalInformation', this.formItem, r => {
						if (r.data.code === 0) {
							this.$Message.success('提交成功')
							this.GetPageInfo()
						} else {
							this.$Message.error('提交失败')
						}
					})
				}
			},
			handleReset () {
				this.formItem = {}
			},
			// 进页面获取信息
			GetPageInfo () {
				this.userinfo = JSON.parse(sessionStorage.user)
				this.$api.get(0, '/usr/v2/personalInformation?uId=' + this.userinfo.id, {}, data => {
					if (data.data.data.sex === 1) {
						this.sex = '男'
					} else if (data.data.data.sex === 2) {
						this.sex = '女'
					}
					this.formItem = data.data.data
				})
				this.$api.get(0, '/usr/v2/user?uId=' + this.userinfo.id, {}, r => {
					if (r.data.code === 0) {
						console.log(r.data.data)
						this.headPhoto = r.data.data.headPhoto
					} else {
						this.$Message.error('获取失败')
					}
				})
			},
			editPsd () {
				let msg = '^(?![0-9]+$)(?![a-zA-Z]+$)(?![^0-9a-zA-Z]+$).{6,20}$'
				let rule = new RegExp(msg)
				if (this.passForm.passwordNew !== '' && this.passForm.passwordNew1 !== '' && this.passForm.passwordOld !== '') {
					if (rule.test(this.passForm.passwordNew)) {
						if (this.passForm.passwordNew === this.passForm.passwordNew1) {
							this.$api.put(0, '/usr/v2/user/pwd', {
								uId: this.userinfo.id,
								passWord: this.passForm.passwordNew
							}, data => {
								if (data.data.code === 0) {
									this.$Message.success(data.data.data)
								} else {
									this.$Message.success('修改失败')
								}
							})
						} else {
							this.$Message.error('请确认两次输入的新密码一致')
						}
					} else {
						this.$Message.error('请确认新密码的格式')
					}
				} else {
					this.$Message.error('请输入新/旧密码，不允许为空')
				}
			}
		},
		mounted () {
			this.headers = {
				'Authorization': Util.getToken()
			}
			this.GetPageInfo()
		}
	}
</script>

<style lang="less">
	@redColor: #d00210;

	.Personal-Main {
		width: 100%;
		height: auto;
		font-size: 15px;

		.Personal-Main-concent-li-password {
			width: 100%;
			height: 300px;
		}

		.Personal-Main-concent-Modify {
			width: 116px;
			height: 30px;
			line-height: 10px;
			background: @redColor;
			color: #fff;
			margin-top: 50px;
		}

		.Personal-Main-concent-li-card {
			width: 100%;
			height: 235px;
			position: relative;

			// 头像上传的btn
			.HeadPortrait {
				width: 300px;
				height: 200px;
				position: absolute;
				left: 20px;
				top: 16px;
				z-index: 200;
				background: rgba(255, 255, 255, 0.2);
			}

			.HeadPortrait-Img {
				width: 300px;
				height: 200px;
				/*background: red;*/
				position: absolute;
				left: 20px;
				top: 16px;
			}

			// 身份证上传的btn正面
			.PersonalCard {
				width: 300px;
				height: 200px;
				position: absolute;
				left: 20px;
				top: 16px;
				z-index: 200;
				background: rgba(255, 255, 255, 0.2);
			}

			.PersonalCard-Img {
				width: 300px;
				height: 200px;
				/*background: red;*/
				position: absolute;
				left: 20px;
				top: 16px;
			}

			// 身份证上传的btn反面
			.PersonalCard1 {
				width: 300px;
				height: 200px;
				position: absolute;
				left: 380px;
				top: 16px;
				z-index: 200;
				background: rgba(255, 255, 255, 0.2);
			}

			.PersonalCard1-Img {
				width: 300px;
				height: 200px;
				/*background: red;*/
				position: absolute;
				left: 380px;
				top: 16px;
			}
		}

		.ivu-icon-ios-close {
			line-height: 30px;
		}

		.Personal-Main-tab {
			width: 320px;
			height: 100%;
			margin-right: 20px;
			float: left;
			display: flex;
			flex-direction: column;

			.Personal-Main-tab-news {
				width: 100%;
				height: 240px;
				background: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 10px;
				padding: 10px 0 30px 0;

				.Personal-Main-tab-img {
					width: 180px;
					height: 180px;
					border-radius: 50%;
					position: relative;

					img {
						display: block;
						width: 60%;
						height: 60%;
						border-radius: 50%;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						top: 0;
						margin: auto;
					}
				}
			}

			.Personal-Main-tab-li {
				width: 100%;
				height: auto;
				background: #fff;
				padding: 45px 0;

				li {
					display: inline-block;
					width: calc(100% - 40px);
					height: 88px;
					text-align: center;
					line-height: 88px;
					border-bottom: 1px dashed #f2f2f2;
					margin: 0 20px;
					cursor: pointer;
				}
			}

			.LiActive {
				color: @redColor;
			}
		}

		.Personal-Main-concent {
			width: calc(100% - 320px - 20px);
			height: 100%;
			background: #fff;
			float: left;

			.Personal-Main-concent-li {
				width: 100%;
				height: 690px;
				padding: 50px;
			}

			.Personal-Main-concent-sub {
				width: 84px;
				height: 30px;
				line-height: 10px;
				background: @redColor;
				color: #fff;
				margin-top: 50px;
				margin-right: 30px;
			}

			.Personal-Main-concent-can {
				width: 84px;
				height: 30px;
				line-height: 10px;
				background: #eeeefe;
				margin-top: 50px;

				&:hover {
					border-color: #eeeefe;
					color: #000;
				}
			}
		}
	}
</style>
